<template>
 <div id="letter">
  <h3>编辑推荐</h3>
  <ul class="list">
   <template tag="ul" v-for="item in list">
    <li :key="item.id" @click="abc(item.id)">
     <img :src="item.picUrl" />
     <span>{{ parseInt(item.playCount / 10000) }}万</span>
     <p>{{ item.name }}</p>
    </li>
   </template>
  </ul>
 </div>
</template>

<script>
export default {
 props: ["list"],
 methods: {
  abc(id) {
   // console.log(11);
   this.$router.push({ name: "details", query: { id } });
  },
 },
};
</script>

<style lang="scss" scoped>
#letter {
 h3 {
  margin: _vw(14);
 }
 .list {
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  li {
   position: relative;
   margin-bottom: _vw(20);
   width: _vw(250);

   img {
    width: _vw(230);
    height: _vw(230);
   }
   p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: _vw(14);
   }
   span {
    z-index: 1;
    position: absolute;
    top: _vw(2);
    right: _vw(20);
    font-size: _vw(12);
    color: #fff;
   }
  }
 }
}
</style>
